{% extends "base.html" %}
            {% block control %}<li class="treeview active">{% endblock %}
          {% block node %}
                <li class="active"><a href="/node/"><i class="fa fa-genderless"></i>节点管理</a></li>
             {% endblock %}
      <!-- Content Wrapper. Contains page content -->
             {% block content %}

          <ol class="breadcrumb">
            <li><i class="fa fa-television"></i> 管理中心</li>
            <li class="active">节点列表</li>
          </ol>

        <!-- Main content -->
        <section class="content">

          <div class="row">
            <div class="col-xs-12">


              <div class="box">
                <div class="box-header">
                  <h3 class="box-title">节点列表</h3>
                    <div class="pull-right">
                  <button class="btn btn-primary" data-toggle="modal" data-target="#myModal">
                       <i class="fa fa-plus-circle"></i>添加节点
                  </button>
                        </div>
                <form class="modal fade form-horizontal" id="myModal" tabindex="-1" role="dialog"
                   aria-labelledby="myModalLabel" aria-hidden="true"  method="post">
                    {% csrf_token %}
                   <div class="modal-dialog">
                      <div class="modal-content">
                         <div class="modal-header">
                            <button type="button" class="close"
                               data-dismiss="modal" aria-hidden="true">
                                  &times;
                            </button>
                            <h4 class="modal-title" id="myModalLabel">
                               添加节点（加验证）
                            </h4>
                         </div>
                         <div class=" box-body">
                             <div class="form-group">
                                 <div class="col-sm-5 control-label">
                             {{ form_info.node_name.label_tag }}</div>
                                 <div class="col-sm-7">
                                     {{ form_info.node_name }}
                                  </div>
                             </div>
                             <div class="form-group">
                                 <div class="col-sm-5 control-label">
                             {{ form_info.NodeIP.label_tag }}</div>
                                 <div class="col-sm-7">
                                     {{ form_info.NodeIP }}
                                  </div>
                             </div>
                             <div class="form-group">
                                 <div class="col-sm-5 control-label">
                             {{ form_info.token.label_tag }}</div>
                                 <div class="col-sm-7">
                                     {{ form_info.token }}
                                  </div>
                             </div>
                             <div class="form-group">
                                 <div class="col-sm-5 control-label">
                             节点组</div>
                                 <div class="col-sm-7">
                                     {{ form_info.nodegroup }}
                                  </div>
                             </div>
                             <div class="form-group">
                                 <div class="col-sm-5 control-label">
                             线路标签</div>
                                 <div class="col-sm-7">
                                     {{ form_info.route }}
                                  </div>
                             </div>
                         </div>
                         <div class="modal-footer">
                            <button type="button" class="btn btn-default"
                               data-dismiss="modal">关闭
                            </button>
                            <button type="submit" class="btn btn-primary">
                               添加
                            </button>
                         </div>
                      </div><!-- /.modal-content -->
                </div><!-- /.modal -->
                </form>
                </div><!-- /.box-header -->
                <div class="box-body">
                  <table id="example1" class="table table-bordered table-striped">
                    <thead>
                      <tr>
                        <th>节点名称</th>
                        <th>IP地址</th>
                        <th>状态</th>
                        <th>CPU使用</th>
                        <th>内存使用</th>
                        <th>流量使用</th>
                        <th>操作</th>
                      </tr>
                    </thead>
                    <tbody>
                    {% for node in node_list %}
                      <tr>
                        <td>{{ node.node_name }}</td>
                        <td>{{ node.NodeIP }}</td>
                        <td>{{ node.Status }}</td>
                        <td>{{ node.cpu_free }}</td>
                        <td>{{ node.Mem_per }}</td>
                        <td>流入:{{ node.recv_rate0 }}<br>流出:{{ node.send_rate0 }}</td>
                        <td style="width:130px" >
                           <a href="/node/detail/{{ node.id }}"><button type="button" class="btn btn-primary btn-xs"><i class="fa fa-calendar-o"></i>详情</button></a>
                            <a href="/node/modify/{{ node.id }}"><button type="button" class="btn btn-primary btn-xs"><i class="fa fa-calendar-o"></i>设置</button></a>
                            <button type="button" class="btn btn-primary btn-xs"><i class="fa fa-calendar-o"></i>初始化</button></a>
                            <a href="http://{{ node.NodeIP }}:3000/ocdn/reload?token={{ node.token }}"><button type="button" class="btn btn-primary btn-xs"><i class="fa fa-calendar-o"></i>重启nginx</button></a>
                            <button class="btn btn-primary btn-xs" data-toggle="modal" data-target="#myModaldel"><i class="fa fa-plus-circle"></i>删除</button>
                            <div class="modal fade" id="myModaldel" tabindex="-1" role="dialog"
                               aria-labelledby="myModalLabel" aria-hidden="true">
                               <div class="modal-dialog">
                                  <div class="modal-content">
                                     <div class="modal-header">
                                        <button type="button" class="close"
                                           data-dismiss="modal" aria-hidden="true">
                                              &times;
                                        </button>
                                        <h4 class="modal-title" id="myModalLabel">
                                           删除
                                        </h4>
                                     </div>
                                     <div class="modal-body">
                                        确认删除{{ node.node_name }}?
                                     </div>
                                     <div class="modal-footer">
                                        <button type="button" class="btn btn-default"
                                           data-dismiss="modal">取消
                                        </button>
                                        <a href="/node/del/{{ node.id }}"><button type="button" class="btn btn-warning"><i class="fa fa-calendar-o"></i>删除</button></a>
                                     </div>
                                  </div><!-- /.modal-content -->
                            </div><!-- /.modal -->
                            </div>
                        </td>
                      </tr>
                    {% endfor %}
                    </tbody>
                  </table>
                </div><!-- /.box-body -->
              </div><!-- /.box -->
            </div><!-- /.col -->
          </div><!-- /.row -->
<p id="time"></p>
        </section><!-- /.content -->
    {% endblock %}

  {% block js %}
    {% load staticfiles %}
        <!-- DataTables -->
    <script src="{% static "plugins/datatables/jquery.dataTables.min.js" %}"></script>
    <script src="{% static "plugins/datatables/dataTables.bootstrap.min.js" %}"></script>

    <!-- Optionally, you can add Slimscroll and FastClick plugins.
         Both of these plugins are recommended to enhance the
         user experience. Slimscroll is required when using the
         fixed layout. -->
      <script>
 $(document).ready(function() {
    $('#example1').dataTable( {
    } );
} );

            function update(data) {
                
            }
            function timeDown(limit, i) {
                limit--;
                if (i > 6) {
                    i = 0;
                }
                if (limit < 0) {
                    limit = 5;
                    update();
                    i++;
                }
                $('#time').text(limit + '秒后刷新');
                setTimeout(function() {
                    timeDown(limit, i);
                }, 1000)
            }

            $(document).ready(function() {
                timeDown(5, 0)
         })
    </script>
  {% endblock %}
